import './RightDetailLists.scss'
import { Button, } from 'antd';
import { useEffect, useState } from 'react'
import { getRankListDetail } from '../../../api/index'
import { useHistory } from "react-router-dom";
import { createRef } from 'react';
import CommentModule from '../../CommentModule.jsx'

function RightDetailLists (props) {
  const commentDom = createRef()
  const [detailData, setdetailData] = useState({ tracks:[] })
  useEffect(() => {
    if (props.id === '') return
    getRankListDetail({id: props.id}).then(({data}) => {
      setdetailData(data.playlist)
    })
  }, [props])
  let history = useHistory();
  function gotoDetail(id) {
    history.push(`/discover/song/${id}`);
  }
  function goViewComment() {
    document.querySelector('#commentBox').scrollIntoView()
    console.log(commentDom.current)
  }
  return (
    <div id="RightDetailLists">
      <div className="header_box">
        <div className="img_box">
          <img src={detailData.coverImgUrl} alt="" />
        </div>
        <div className="info_box">
          <div className="name">{detailData.name}</div>
          <div className="time">{detailData.description}</div>
          <div className="fun_container">
            <Button icon={<span className="iconfont icon-bofang" />}>
              播放
            </Button>
            <Button icon={<span className="iconfont icon-jia" />}>
            </Button>
            <Button icon={<span className="iconfont icon-tianjiawenjian" />}>
              收藏
            </Button>
            <Button icon={<span className="iconfont icon-fenxiang" />}>
              分享
            </Button>
            <Button icon={<span className="iconfont icon-xiazai_" />}>
              下载
            </Button>
            <Button onClick={goViewComment} icon={<span className="iconfont icon-duihua-2" />}>
              (4939)
            </Button>
          </div>
        </div>
      </div>
      <div className="song_lists">
        <div className="titel_box">
          <div className="left">
            <h1>歌曲列表</h1><span>{detailData.trackCount}首歌曲</span>
          </div>
          <div className="right">
            播放：<span>{detailData.playCount}</span>次
          </div>
        </div>
        <table border='0'>
          <thead>
            <tr>
              <th></th>
              <th>标题</th>
              <th>时常</th>
              <th>歌手</th>
            </tr>
          </thead>
          <tbody>
            {
              detailData.tracks.map((item, index) => {
                return (
                  <tr key={item.id}>
                    <td className='color999'>{index+1}</td>
                    <td>
                      {
                        index<3&&(
                          <img src={item.al.picUrl} alt="" style={{width: '50px', height: '50px', marginRight: '10px'}} />
                        )
                      }
                      <i className="iconfont icon-bofang color999" style={{marginRight: '10px'}}></i>
                      <span className='pointer' onClick={() => gotoDetail(item.id)}>{item.name}</span>
                      {
                        item.al.tns.map((citem, index) => <span className='color999' key={index}>({citem})</span>)
                      }
                      {
                        item.alia.map((citem, index) => <span className='color999' key={index}>({citem})</span>)
                      }
                    </td>
                    <td>
                      {
                        parseInt(item.dt/1000/60)
                      }: {
                        parseInt(item.dt/100)%60
                      }
                    </td>
                    <td>
                      {
                        item.ar.map((citem, index) => {
                          return (
                            <span key={index}>
                              {
                                index > 0 && <span>/</span>
                              }
                              {citem.name}
                            </span>
                          )
                        })
                      }
                    </td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </div>
      <div  id='commentBox'>
        <CommentModule id={props.id} type={2} />
      </div>
    </div>
  )
}
export default RightDetailLists